<template>
    <div class="code" :style="codeStyle">
        <div class="code-main" v-loading="loading">
            <div class="code-options">
                <div>
                    <el-form
                        :inline="true"
                        :model="search"
                        class="demo-form-inline"
                    >
                        <el-form-item label="规则名称">
                            <el-input
                                v-model.trim="search.name"
                                placeholder="请输入规则名称搜索"
                            ></el-input>
                            </el-form-item>
                            <el-form-item label="规则类型">
                       <el-select v-model="search.ruleType" placeholder="请选择">
                            <el-option
                            v-for="item in optionSelects"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-button plain @click="clearSearch"
                                >重置</el-button
                            >
                            <el-button
                                type="primary"
                                :disabled="(search.name || search.ruleType) ? false : true"
                                @click="toSearch"
                                >查询</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button
                        type="primary"
                        round
                        icon="el-icon-plus"
                        @click="handleAdd"
                        >新增编码</el-button
                    >
                </div>
            </div>
            <el-card class="list-group" v-if="list.length">
                <VoSchemaTable
                    ref="st"
                    :data="list"
                    v-bind="table"
                    :columns="columns"
                >
                    <template #default="{ row }">
                        <el-button
                            @click="rowUpdate({ row })"
                            icon="el-icon-edit"
                            type="text"
                            :disabled="row.ruleType === '0' ? true : false"
                        >
                            编辑
                        </el-button>
                        <el-button
                            @click="rowDelete({ row })"
                            icon="el-icon-delete"
                            type="text"
                            :loading="deleteLoading"
                            :disabled="row.ruleType === '0' ? true : false"
                        >
                            删除
                        </el-button>
                        <el-button
                            @click="rowFunctionalTest({ row })"
                            icon="el-icon-news"
                            type="text"
                            :disabled="row.ruleType === '2' ? true : false"
                        >
                            功能测试
                        </el-button>
                    </template>
                </VoSchemaTable>
                <div class="code-page">
                    <el-pagination
                        v-show="total > 0"
                        background
                        :current-page="search.current"
                        :page-size="search.size"
                        :layout="layout"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                </div>
            </el-card>
            <el-empty v-if="!list.length" description="暂无数据"></el-empty>
        </div>
        <!-- 弹框 -->
        <el-dialog
            :title="title"
            width="50%"
            :visible.sync="visible"
            :close-on-click-modal="false"
            :destroy-on-close="true"
        >
            <add-dialog
                :loading="saveLoading"
                ref="appEdit"
                @cancel="cancelInit"
            ></add-dialog>
        </el-dialog>
        <!-- 功能测试弹框 -->
        <el-dialog
            :title="title"
            width="550px"
            :visible.sync="functionaltest"
            :close-on-click-modal="false"
            :destroy-on-close="true"
        >
            <functional-Test
                :loading="saveLoading"
                ref="functionaltestEdit"
                @cancel="cancelInit"
            ></functional-Test>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
    getGenerateData,
    deleteGenerate,
    allGenerate,
} from '@/api/code/codeGeneration'
import addDialog from './add.vue'
import functionalTest from './functionaltest.vue'
export default {
    name: 'CodeManage',
    components: {
        addDialog,
        functionalTest
    },
    data () {
        return {
            //查询参数
            search: {
                current: 1,
                size: 10,
                // ruleType: 1,
                privateOrg: -1
            },
            loading: false,
            list: [],// 列表
            // 表格字段
            columns: [
                {
                    label: '规则名称',
                    prop: 'name',
                    align: 'center',
                    showOverflowTooltip: true, //字段过长省略号隐藏,
                    disableCheck: false,
                    showColumn: true,
                },
                {
                    label: '规则标识',
                    prop: 'ruleCode',
                    align: 'center',
                    disableCheck: false,
                    showOverflowTooltip: true,
                    showColumn: true,
                },
                {
                    label: '编码规则',
                    prop: 'rulePlaceholder',
                    align: 'center',
                    disableCheck: false,
                    showOverflowTooltip: true,
                    showColumn: true,
                },
                {
                    label: '规则类型',
                    prop: 'ruleType',
                    align: 'center',
                    disableCheck: false,
                    showOverflowTooltip: true,
                    showColumn: true,
                    scopedSlots: {
                        default: ({ row }) => {
                            return (
                                <span>
                                    {row.ruleType == '1'
                                        ? '业务'
                                        : row.ruleType == '2'
                                            ? '常量'
                                            : '系统'}
                                </span>
                            )
                        },
                    },
                },
                 {
                    label: '常量值',
                    prop: 'ruleValue',
                    align: 'center',
                    disableCheck: false,
                    showOverflowTooltip: true,
                    showColumn: true,
                },
                {
                    label: '操作',
                    prop: 'default',
                    fixed: 'right',
                    align: 'center',
                    disableCheck: false,
                    showColumn: true,
                },
            ],
            total: 0, //总数
            visible: false, //新增、编辑
            title: '新增',
            // 启用停用
            options: [],
            optionSelects: [{
                value: '1',
                label: '业务'
                }, {
                value: '2',
                label: '常量'
                }],
            saveLoading: false, //弹框加载
            deleteLoading: false, //删除加载
            functionaltest: false, //功能测试弹框
            layout: 'total, sizes, prev, pager, next, jumper',
            table: {
                border: true,
            },

        }
    },
    created () {
        this.init()
    },
    computed: {
        ...mapGetters(['systemConfig']),
        codeStyle () {
            return {
                paddingRight: this.systemConfig.tableRight ? '216px' : '0px'
            }
        },
    },

    methods: {
        //  初始化列表
        init () {
            this.fetchData()
            this.optionsData()
        },
        fetchData () {
            this.loading = true
            getGenerateData(this.search)
                .then((res) => {
                    this.loading = false
                    if (res.code === 0) {
                        this.list = res.data.records || []
                        this.total = res.data.total
                    }
                })
                .catch(() => {
                    this.loading = false
                })
        },
        // 获取编码
        optionsData () {
            allGenerate()
                .then((res) => {
                    this.loading = false
                    if (res.code === 0) {
                        res.data.forEach((item, i) => {
                            try {
                                item.ruleParam = JSON.parse(item.ruleParam)
                            } catch (error) { }
                        })
                        this.options = res.data
                    }
                })
                .catch(() => {
                    this.loading = false
                })
        },
        // 新增编码
        handleAdd () {
            this.title = '新增'
            this.visible = true
            this.$nextTick(() => {
                if (this.$refs.appEdit) {
                    this.$refs.appEdit.init(null, this.options)
                }
            })
        },
        // 功能测试
        rowFunctionalTest ({ row }) {
            this.functionaltest = true
            this.title = '功能测试'
            this.$nextTick(() => {
                this.$refs.functionaltestEdit.init(row)
            })
        },
        // 删除按钮操作
        rowDelete ({ row }) {
            this.$confirm(`确定删除 ${row.name} , 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    this.deleteSave(row)
                })
                .catch(() => { })
        },
        // 编辑按钮操作
        rowUpdate ({ row }) {
            this.visible = true
            this.title = '编辑'
            this.$nextTick(() => {
                this.$refs.appEdit.init(row, this.options)
            })
        },
        // 确定删除
        deleteSave (row) {
            if (this.deleteLoading) return
            this.deleteLoading = true
            deleteGenerate(row.id)
                .then((res) => {
                    this.deleteLoading = false
                    if (res.code == 0) {
                        this.init()
                        this.$message.success('删除成功')
                    } else {
                        this.$message.error('操作失败')
                    }
                })
                .catch((err) => {
                    this.deleteLoading = false
                })
        },
        // 关闭弹框
        cancelInit () {
            this.visible = false
            this.functionaltest = false
            this.init()
        },
        // 搜索事件
        toSearch () {
            this.search.current = 1
            this.init()
        },
        // 重置事件
        clearSearch () {
            this.search = {
                current: 1,
                size: 10,
                ruleType: 1,
                privateOrg: -1,
                ruleType:''
            }
            this.init()
        },
        handleSizeChange (val) {
            this.search.size = val
            this.fetchData()
        },
        handleCurrentChange (val) {
            this.search.current = val
            this.fetchData()
        },
    },
}
</script>
<style lang="scss" scoped>
.code {
    padding-right: 216px;
    position: relative;
    .code-main {
        box-sizing: border-box;
        padding: 16px;
        border: 1px solid $--border-color-base;
        border-radius: 8px;
    }
    .code-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 16px;
        margin-bottom: 16px;
    }
    .list-group {
        & + .list-group {
            margin-top: 10px;
        }
    }
    .code-page {
        margin: 5px 0;
        text-align: center;
    }
}
</style>
